<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre>
          Vue自定义指令：本身提供的指令不能满足需求。
          bind：在绑定元素时只调用一次，可以在bind中设置初始化设置
          inserted:在被插入父元素时触发
                        注意点：钩子函数除了el之外，其他参数都应该都是只读，切勿修改。如果在钩子函数之间共享数据，使用dataset

        定义自定义函数时不需要加v-，调用时加v-

        计算属性：计算属性就是把数据处理一下，数据改变师徒也会改变
            调用方式直接使用名字
            计算属性依赖的是data里面的数据，data改变计算属性也会改变


    重点★★★★★
    计算属性与方法的区别
        1：计算属性基于依赖缓存，方法不不依赖缓存
        2：计算属性调用直接属性名，方法需要加（）
        3：计算属性直接调用，方法一般调用它的是事件
        计算属性一般依赖于data中的数据，方法则没有



        指令 
        Vue.directives('up',{
           inserted: function(el){
            }
            bind:function(){}
        })
v-name调用

        vue.compted('get',function(el){
                this.data
        }
{{comptedNmae}}

        watch:{
            data:function(){}
        }
watch不要调用
        vue.filter('up',function(){})
el|filterName[()]
        v-model.number
                trim
                lazy

      </pre
    >
    <div class="box">
      <form action="">
        获取焦点：
        <input
          type="text"
          v-focus
          v-bgc="{color:'red'}"
          v-model.number="user"
        />
      </form>
      <p>{{adds}}</p>

      <div>
        {{fangfa()}} {{fangfa()}}
        <!-- 方法每一次都会输出 -->
      </div>
      <div>
        <!-- 计算方法发现缓存中有一样的数据就不会再次执行代码-->
        {{jisuan}}{{jisuan}}
      </div>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      //自定义指令获取焦点（全局指令）
      //   Vue.directive('focus', {
      //     inserted: function (el) {
      //       el.focus()
      //     },
      //   })

      //   Vue.directive('bgc', {
      //     bind: function (el, params) {
      //       console.log(params.value.color)
      //       if (params.value) {
      //         el.style.backgroundColor = params.value //数组形式
      //       }
      //       el.style.backgroundColor = params.value.color //对象形式
      //     },
      //   })
      new Vue({
        el: '.box',
        data: {
          user: '',
        },
        methods: {
          fangfa() {
            console.log('fangfa ')
          },
        },
        directives: {
          focus: {
            inserted: function (el) {
              el.focus()
            },
          },
          bgc: {
            bind: function (el, params) {
              console.log(params.value.color)
              if (params.value) {
                el.style.backgroundColor = params.value //数组形式
              }
              el.style.backgroundColor = params.value.color //对象形式
            },
          },
        },
        computed: {
          jisuan() {
            console.log('jisuan ')
          },
          adds: function (params) {
            console.log(params)
            return (this.user = ++this.user)
          },
        },
        watch: {
          user: function (newUser) {
            console.log(newUser + 'watch')
          },
        },
      })
    </script>
  </body>
</html>
